import React, { useEffect, useState } from 'react';
import { Form, Button, message, Radio, InputNumber } from 'antd';
import styles from './index.module.scss';
import { paypalCheckout } from '@/service';
import { useTranslation } from 'react-i18next';

export default () => {
    const [form] = Form.useForm(); // 创建表单实例
    const [selectedValue, setSelectedValue] = useState('1'); // 选中的支付方式
    const [amount, setAmount] = useState(0); // 存储充值金额
    const [loadingRecharge, setloadingRecharge] = useState(false);
    const [messageApi, contextHolder] = message.useMessage();
    const { t } = useTranslation();

    const handleClose = () => {
        form.resetFields();
    };

    const handleRadioChange = (e) => {
        setSelectedValue(e.target.value);
    };

    const PAY_METHOD = [
        { key: '1', label: t('menu.recharge.type.lable') },
    ];
    const amountHandle = (value) => {
        setAmount(value);
    }
    const creatOrder = async () => {
        let params = {
            type: '1',
            amount: amount,
        };
        try {
            setloadingRecharge(true);
            const response = await paypalCheckout(params);
            if (response && response.data) {
                const { approveUrl, orderId } = response.data;
                if (approveUrl) {
                    sessionStorage.setItem('orderId', orderId);
                    //进行页面跳转
                    window.location.href = approveUrl;
                } else {
                    messageApi.open({
                        type: 'error',
                        content: response?.message,
                    });
                }
                setloadingRecharge(false);
            }
        } catch (error) {
            if (error?.message) {
                messageApi.open({
                    type: 'error',
                    content: error?.message,
                });
            }
            setloadingRecharge(false);
        }
    };
    const onSubmit = async () => {
        try {
            await form.validateFields().then(async () => {
                if (amount > 0 && selectedValue === '1') {
                    creatOrder();
                }
            });
        } catch (error) {
            if (error?.message) {
                messageApi.open({
                    type: 'error',
                    content: error?.message,
                });
            }
        }
    };

    return (
        <div className={styles['container']}>
            <div className={styles.content}>
                <div className={styles.title}>{t('menu.recharge.title')}</div>
                <Form
                    form={form}
                    name="recharge_form"
                    className={`custom-form-primary ${styles.rechargeform}`}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 12 }}
                    initialValues={{ type: '1' }}
                >
                    <Form.Item
                        name="type"
                        label={t('menu.recharge.form.payment.lable')}
                    >
                        <Radio.Group className={styles.radioGroup} onChange={handleRadioChange}>
                            {PAY_METHOD.map(item => (
                                <div key={item.key} className={styles.radioButton} style={{ backgroundColor: selectedValue === item.key ? '#f0fcff' : '', }}>
                                    <Radio value={item.key}>{item.label}</Radio>
                                </div>
                            ))}
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label={t('menu.recharge.form.amount.lable')}
                        name="amount"
                        rules={[{ required: true, message: t('menu.recharge.form.amount.Rules.lable') }]}
                    >
                        <InputNumber
                            onChange={amountHandle}
                            controls={false}
                            style={{ width: '50%' }}
                            prefix="$"
                            placeholder={t('common.modal.enterPlacehoder')}
                             />
                    </Form.Item>

                    {/* <div id="paypal-button-container" className={styles.paypalButton}></div> */}

                    <div className={styles.btnGroup}>
                        <Form.Item noStyle>
                            <Button className={styles.cancelBtn} onClick={handleClose}>
                                {t('common.modal.button.cancel')}
                            </Button>
                            <Button type='primary' htmlType="submit" onClick={onSubmit} loading={loadingRecharge}>
                                {t('menu.account.rechargeBtn')}
                            </Button>
                        </Form.Item>
                    </div>
                </Form>
            </div>
            {contextHolder}
        </div>
    );
};
